<template>
	<view>
		<view class="flex head-title-nav px-3">
			<view :class="navType == 0? 'active':''" @click="tabType(0)">系统消息</view>
			<view :class="navType == 0? '':'active'" @click="tabType(1)">通知消息</view>
		</view>
		<!-- 系统消息 -->
		<view v-if="navType == 0">
			<view class="py-2  px-3 border-bottom mt-2" v-for="(item,index) in xtlist" :key="index" @click="informDetail(item)">
				<view class="font">{{item.name}}</view>
				<view class="pt-1 time font-sm">{{item.createtime*1000 | fromData}}</view>
			</view>
		</view>
		<!-- 通知消息 -->
		<view v-if="navType == 1">
			<view class="flex align-center justify-between px-3 border-bottom mt-2" v-for="(item,index) in tzist" :key="index" @click="informDetail(item)">
				<view class="py-2">
					<view class="font">{{item.name}}</view>
					<view class="pt-1 font-sm time text-ellipsis">{{item.info}}</view>
				</view>
				<view class="font-sm">{{item.createtime*1000 | fromData}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { postSystemNoticeList,postNoticeList } from '@/api/home.js'
	export default {
		data() {
			return {
				navType: 0, // 0系统消息  1通知消息
				xtlist:[], // 系统消息
				tzist: [], // 通知消息
				count: 0, //总数
				page:1,
				limit:10
			}
		},
		filters:{
			fromData(date) {
				var date = new Date(date);
				  var YY = date.getFullYear() + '-';
				  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				  return YY + MM + DD +" "+hh + mm + ss;
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){
				this.getSystemNotice();
				this.getNotice();
			},
			// 切换记录
			tabType(index) {
				this.navType = index;
				this.xtlist = []
				this.tzist = []
				this.count = 0
				if(index == 0) {
					this.getSystemNotice()
				} else {
					this.getNotice()
				}
			},
			
			// 系统消息
			getSystemNotice(){
				postSystemNoticeList().then(res=>{
					if(res.data.code==1){
						var list = res.data.data.systemList;
						this.count = res.data.data.count;
						list.forEach(item => {
							this.xtlist.push(item)
						})
					}
				})
			},
			
			// 通知消息
			async getNotice() {
				var data = {
					page: this.page,
					limit: this.limit,
				}
				data.token = await uni.getStorageSync('token');
				var res = await postNoticeList(data);
				if(res.data.code == 1) {
					var list = res.data.data.noticeList;
					this.count = res.data.data.count;
					list.forEach(item => {
						this.tzist.push(item)
					})
				}
				
			},
			
			// 消息详情
			informDetail(item) {
				wx.navigateTo({
					url: "/pages/home/inform-detail?detail="+JSON.stringify(item)
				})
			}
		},
		onReachBottom() {
			if(this.navType == 0){
				// 系统通知
				if(this.xtlist.length < this.count) {
					++this.page
					this.getSystemNotice()
				} else {
					wx.showToast({title:"已经到底了",icon: "none"})
				}
			} else {
				// 通知消息
				if(this.tzist.length < this.count) {
					++this.page
					this.getNotice()
				} else {
					wx.showToast({title:"已经到底了",icon: "none"})
				}
			}
			
		}
	}
</script>


<style scoped>
	.time{
		color: #666666;
		font-size: 30rpx;
	}
	.head-title-nav {
		width: 100%;
		box-sizing: border-box;
	}
	.head-title-nav > view {
		width: 50%;
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		box-sizing: border-box;
	}
	
	.head-title-nav > .active {
		color: #49c265;
	}
</style>